{% extends 'admin/base.html' %}
{% load custom_filters staticfiles %}
{% block content %}
    <style>
        .cell {
            text-align: center;
        }

        div[class="el-input"] {
            width: 220px;
        }

        .el-drawer.rtl {
            overflow: scroll;
        }
    </style>
    <div id="app">
        <el-row>
            <el-button type="primary" @click="dialogFormVisible = true">添加链接</el-button>
            <el-dialog title="添加友情链接" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                    <el-form-item label="链接名称" :label-width="formLabelWidth">
                        <el-input v-model="form.link_name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="链接地址" :label-width="formLabelWidth">
                        <el-input v-model="form.link_url" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="到期时间" :label-width="formLabelWidth">
                        <el-date-picker v-model="form.link_end_date" type="datetime" placeholder="选择日期时间" align="right" :picker-options="pickerOptions"
                                        @change="dateTimeChange"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="链接排序" :label-width="formLabelWidth">
                        <el-input v-model="form.link_sort" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="备注说明" :label-width="formLabelWidth">
                        <el-input v-model="form.link_remark" autocomplete="off" type="textarea"></el-input>
                    </el-form-item>
                </el-form>

                <div slot="footer" class="dialog-footer">
                    <el-button @click="resetForm">取 消</el-button>
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                </div>

            </el-dialog>
            <el-dialog title="修改友情链接" :visible.sync="dialogEditFormVisible">
                <el-form :model="formEdit">
                    <el-form-item label="链接名称" :label-width="formLabelWidth">
                        <el-input v-model="formEdit.link_name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="链接地址" :label-width="formLabelWidth">
                        <el-input v-model="formEdit.link_url" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="到期时间" :label-width="formLabelWidth">
                        <el-date-picker v-model="formEdit.link_end_date" type="datetime" placeholder="选择日期时间" align="right" :picker-options="pickerOptions"
                                        @change="dateTimeChange"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="链接排序" :label-width="formLabelWidth">
                        <el-input v-model="formEdit.link_sort" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="备注说明" :label-width="formLabelWidth">
                        <el-input v-model="formEdit.link_remark" autocomplete="off" type="textarea"></el-input>
                    </el-form-item>
                </el-form>

                <div slot="footer" class="dialog-footer">
                    <el-button @click="resetForm">取 消</el-button>
                    <el-button type="primary" @click="submitEditForm">确 定</el-button>
                </div>

            </el-dialog>
        </el-row>
        <br/>
        <template>
            <el-table :data="tableData" style="width: 100%" border>
                <el-table-column label="修改时间" width="180" prop="update_time"></el-table-column>
                <el-table-column label="到期时间" width="180" prop="end_time"></el-table-column>
                <el-table-column label="链接名称" width="180" prop="link_name"></el-table-column>
                <el-table-column label="链接URL">
                    <template slot-scope="scope">
                        <a :href="scope.row.link_url" target="_blank" v-text="scope.row.link_url" title="在新窗口打开"></a>
                    </template>
                </el-table-column>
                <el-table-column prop="link_remark" label="备注信息" width="100" show-overflow-tooltip></el-table-column>
                <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <br/>

        <el-pagination background layout="prev, pager, next" :total="total" hide-on-single-page @current-change="current_change"
                       :current-page="currentPage"></el-pagination>

    </div>
    <script src="{% static 'js/public.js' %}" type="text/javascript"></script>
    <script>
        var Main = {
            data() {
                return {
                    search: "{{ request.GET.search }}",
                    total: {{ page.num_pages|default:1 }}0,
                    currentPage: {{ dataList.number|default:1 }},
                    tableData: [
                        {% for data in dataList.object_list %}
                            {
                                uuid: '{{ data.uuid }}',
                                update_time: '{{ data.update_time }}',
                                end_time: '{{ data.link_end_date }}',
                                link_name: '{{ data.link_name }}',
                                link_url: '{{ data.link_url }}',
                                link_remark: '{{ data.link_remark }}'
                            },
                        {% endfor %}
                    ],
                    form: {
                        link_name: '',
                        link_url: 'http://',
                        link_end_date: '',
                        link_sort: 0,
                        link_remark: ''
                    },
                    formEdit: {},
                    dialogFormVisible: false,
                    dialogEditFormVisible: false,
                    formLabelWidth: '120px',
                    pickerOptions: {
                        shortcuts: [{
                            text: '今天',
                            onClick(picker) {
                                picker.$emit('pick', new Date());
                            }
                        }, {
                            text: '明天天',
                            onClick(picker) {
                                const date = new Date();
                                date.setTime(date.getTime() + 3600 * 1000 * 24);
                                picker.$emit('pick', date);
                            }
                        }, {
                            text: '一周后',
                            onClick(picker) {
                                const date = new Date();
                                date.setTime(date.getTime() + 3600 * 1000 * 24 * 7);
                                picker.$emit('pick', date);
                            }
                        }]
                    },
                }
            }
            , methods: {
                handleDelete: function (index, row) {
                    Delete(this, index, row);
                },
                handleEdit(index, row) {
                    that = this;
                    result = submit_ajax(this, 'GET', {"uuid": row.uuid}, "{% url 'admin_system:linkEditView' %}", false, false);
                    if (result.code === 0) {
                        that.formEdit = result.data;
                        that.dialogEditFormVisible = true;
                    } else {
                        that.$message.error('拉取渲染失败!');
                    }

                },
                current_change: function (currentPage) {
                    window.location.href = '?page=' + currentPage;
                },
                resetForm: function () {
                    this.dialogFormVisible = false;
                    this.dialogEditFormVisible = false;
                },
                submitForm: function () {
                    var that = this;
                    result = submit_ajax(this, 'POST', this.form,);
                    if (result.code === 0) {
                        that.dialogFormVisible = false;
                        that.form = {}
                    }

                },
                dateTimeChange: function (val) {
                    this.form.link_end_date = dataTime_to_string(val);
                    this.formEdit.link_end_date = dataTime_to_string(val);
                },
                submitEditForm: function () {
                    that = this;
                    result = submit_ajax(this, 'POST', this.formEdit,"{% url 'admin_system:linkEditView' %}");
                }
            }
        };
        var Ctor = Vue.extend(Main);
        new Ctor().$mount('#app');
    </script>
{% endblock %}